<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="
        isUpdate
          ? t('routes.demo.knowledgeManager.viewHistorySet.editHistoryApproval')
          : t('routes.demo.knowledgeManager.viewHistorySet.viewHistoryApproval')
      "
      @register="register"
      @ok="handleSubmit"
      :destroyOnClose="true"
      :minHeight="450"
      :width="1000"
    >
      <BasicTable @register="registerTable">
        <!-- 建立时间 -->
        <template #createTime="{ text: createTime }">{{
          proxy.$filters.filterTime(createTime)
        }}</template>
        <!-- 结束时间 -->
        <template #endtime="{ text: endtime }">{{ proxy.$filters.filterTime(endtime) }}</template>
        <template #expandedRowRender="{ record }">
          <BasicTable @register="registerChildrenTable" :data-source="record.fileList">
            <!-- 建立时间 -->
            <template #createTime="{ text: createTime }">{{
              proxy.$filters.filterTime(createTime)
            }}</template>
          </BasicTable>
        </template>
      </BasicTable>
    </BasicModal>
  </div>
</template>
<script lang="ts" setup>
  /**
   * 模块名:历史借阅审批流程相关数据,下挂文件相关数据
   * 代码描述:
   * 作者:张泽源
   * 创建时间:2024/02/29 15:24:41
   */
  import { ref, getCurrentInstance } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';

  import { getHistoryBorrowApprovalList } from '/@/api/demo/document';
  import {
    getHistoryApprovalProcessColumns,
    getHistoryApprovalProcessFileColumns,
  } from './tableData';

  const { t } = useI18n();
  const { proxy }: any = getCurrentInstance();
  const isUpdate = ref<boolean>(false);
  const fileOId = ref<string>('');
  const fileVersion = ref<string>('');

  // 提交
  async function handleSubmit() {
    try {
      setModalProps({ confirmLoading: true });
      closeModal();
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    isUpdate.value = !!data?.isUpdate;
    fileOId.value = data.record.oId;
    fileVersion.value = data.record.canBrowserVision;
    // reload({
    //   searchInfo: { fileOId: fileOId.value, fileVersion: fileVersion.value },
    // });
  });

  // 父级表格
  const [registerTable] = useTable({
    titleHelpMessage: 'knowledgeViewHistory',
    columns: getHistoryApprovalProcessColumns(),
    api: getHistoryBorrowApprovalList,
    beforeFetch: (params) => {
      params.fileOId = fileOId.value;
      params.fileVersion = fileVersion.value;
    },
    fetchSetting: {
      // 当前页传递给后台的字段名称
      pageField: 'CurrentPage',
      // 后台每页显示的数量字段名称
      sizeField: 'PageSizes',
      // 接口返回的表单数据字段名称
      listField: 'items',
      // 接口返回的表格总数字段名称
      totalField: 'totalCount',
    },
    showTableSetting: true, // 显示表格设置工具
    showIndexColumn: false,
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    bordered: true,
    canResize: false,
  });

  // 子级表格
  const [registerChildrenTable] = useTable({
    // 分页配置
    columns: getHistoryApprovalProcessFileColumns(),
    showIndexColumn: false,
    showTableSetting: false, // 表格设置工具配置
    bordered: true,
    pagination: false,
    scroll: { x: 0, y: 0 },
    canResize: false,
  });
</script>
